<template>
  <div class="article-editor-page">
    <van-nav-bar
      title="创作文章"
      left-text="返回"
      right-text="发布"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onPublish"
    />
    
    <div class="editor-container">
      <van-field
        v-model="articleTitle"
        placeholder="请输入文章标题"
        class="title-input"
        maxlength="50"
        show-word-limit
      />
      
      <van-field
        v-model="articleCategory"
        is-link
        readonly
        label="分类"
        placeholder="请选择分类"
        @click="showCategoryPicker = true"
      />
      
      <van-popup v-model:show="showCategoryPicker" position="bottom">
        <van-picker
          :columns="categoryColumns"
          @confirm="onCategoryConfirm"
          @cancel="showCategoryPicker = false"
          show-toolbar
          title="选择分类"
        />
      </van-popup>
      
      <div class="cover-upload">
        <div class="upload-label">封面图</div>
        <van-uploader
          v-model="coverImages"
          :max-count="1"
          :after-read="afterCoverRead"
          @delete="onCoverDelete"
        >
          <div class="upload-button">
            <van-icon name="photograph" size="24" />
            <span>上传封面</span>
          </div>
        </van-uploader>
      </div>
      
      <div class="content-editor">
        <div class="editor-label">文章内容</div>
        <van-field
          v-model="articleContent"
          type="textarea"
          placeholder="请输入文章内容"
          rows="10"
          autosize
          class="content-textarea"
        />
      </div>
      
      <div class="editor-tools">
        <div class="tool-item" @click="insertImage">
          <van-icon name="photo-o" />
          <span>插入图片</span>
        </div>
        <div class="tool-item" @click="insertLink">
          <van-icon name="link-o" />
          <span>插入链接</span>
        </div>
        <div class="tool-item" @click="saveAsDraft">
          <van-icon name="save-o" />
          <span>保存草稿</span>
        </div>
      </div>
    </div>
    
    <!-- 插入链接弹窗 -->
    <van-dialog
      v-model:show="showLinkDialog"
      title="插入链接"
      show-cancel-button
      @confirm="confirmInsertLink"
    >
      <van-field
        v-model="linkUrl"
        label="链接地址"
        placeholder="请输入链接地址"
      />
      <van-field
        v-model="linkText"
        label="链接文字"
        placeholder="请输入链接文字"
      />
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()

// 文章信息
const articleTitle = ref('')
const articleCategory = ref('')
const articleContent = ref('')
const coverImages = ref([])

// 分类选择器
const showCategoryPicker = ref(false)
const categoryColumns = [
  { text: '技术', value: 'tech' },
  { text: '设计', value: 'design' },
  { text: '产品', value: 'product' },
  { text: '运营', value: 'operation' },
  { text: '职场', value: 'career' },
  { text: '生活', value: 'life' }
]

// 链接插入
const showLinkDialog = ref(false)
const linkUrl = ref('')
const linkText = ref('')

// 返回上一页
const onClickLeft = () => {
  if (hasUnsavedChanges()) {
    showDialog({
      title: '提示',
      message: '您有未保存的内容，确定要离开吗？',
      showCancelButton: true,
      confirmButtonText: '离开',
      cancelButtonText: '继续编辑'
    }).then(() => {
      router.back()
    }).catch(() => {
      // 继续编辑
    })
  } else {
    router.back()
  }
}

// 检查是否有未保存的更改
const hasUnsavedChanges = () => {
  return articleTitle.value || articleContent.value || coverImages.value.length > 0
}

// 分类确认
const onCategoryConfirm = (value) => {
  articleCategory.value = value.text
  showCategoryPicker.value = false
}

// 上传封面后的处理
const afterCoverRead = (file) => {
  // 实际项目中应该上传到服务器
  console.log('上传封面:', file)
  
  // 模拟上传成功
  showToast('封面上传成功')
}

// 删除封面
const onCoverDelete = () => {
  showToast('封面已删除')
}

// 插入图片
const insertImage = () => {
  showToast('图片上传功能开发中')
}

// 插入链接
const insertLink = () => {
  linkUrl.value = ''
  linkText.value = ''
  showLinkDialog.value = true
}

// 确认插入链接
const confirmInsertLink = () => {
  if (!linkUrl.value) {
    showToast('请输入链接地址')
    return
  }
  
  const text = linkText.value || linkUrl.value
  const linkMarkdown = `[${text}](${linkUrl.value})`
  
  // 在光标位置插入链接
  // 实际项目中应该使用更复杂的编辑器
  articleContent.value += linkMarkdown
  
  showToast('链接已插入')
}

// 保存为草稿
const saveAsDraft = () => {
  if (!articleTitle.value) {
    showToast('请输入文章标题')
    return
  }
  
  // 实际项目中应该调用API保存草稿
  showToast('已保存为草稿')
}

// 发布文章
const onPublish = () => {
  if (!articleTitle.value) {
    showToast('请输入文章标题')
    return
  }
  
  if (!articleCategory.value) {
    showToast('请选择文章分类')
    return
  }
  
  if (!articleContent.value) {
    showToast('请输入文章内容')
    return
  }
  
  // 实际项目中应该调用API发布文章
  showDialog({
    title: '提示',
    message: '文章发布成功！',
    theme: 'round-button',
    confirmButtonText: '确定'
  }).then(() => {
    router.push('/blog')
  })
}
</script>

<style lang="scss" scoped>
.article-editor-page {
  min-height: 100vh;
  background-color: var(--background-color);
  
  .editor-container {
    padding: 16px;
    
    .title-input {
      margin-bottom: 16px;
      
      :deep(.van-field__control) {
        font-size: 18px;
        font-weight: 500;
      }
    }
    
    .cover-upload {
      margin: 16px 0;
      
      .upload-label {
        margin-bottom: 8px;
        font-size: 14px;
        color: var(--text-color-secondary);
      }
      
      .upload-button {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--background-color);
        border: 1px dashed var(--border-color);
        border-radius: 4px;
        
        .van-icon {
          margin-bottom: 8px;
          color: var(--text-color-tertiary);
        }
        
        span {
          font-size: 12px;
          color: var(--text-color-tertiary);
        }
      }
    }
    
    .content-editor {
      margin: 16px 0;
      
      .editor-label {
        margin-bottom: 8px;
        font-size: 14px;
        color: var(--text-color-secondary);
      }
      
      .content-textarea {
        background-color: var(--background-color);
        border-radius: 4px;
        
        :deep(.van-field__control) {
          min-height: 200px;
          line-height: 1.6;
        }
      }
    }
    
    .editor-tools {
      display: flex;
      justify-content: space-around;
      margin-top: 24px;
      padding: 16px 0;
      border-top: 1px solid var(--border-color-light);
      
      .tool-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        
        .van-icon {
          font-size: 24px;
          margin-bottom: 4px;
          color: var(--primary-color);
        }
        
        span {
          font-size: 12px;
          color: var(--text-color-secondary);
        }
      }
    }
  }
}
</style> 